<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">  
<script src="http://a.tbcdn.cn/s/yui/3.3.0/build/yui/yui-min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.1.7/cssreset/reset-min.css">
</head>
<body>
<style>
	html {
		 -webkit-text-size-adjust: 100%;
	 }
	.clearfix:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}

	.clearfix {
		display: inline-block;
	}

	.content {
		width:990px;;margin:20px auto;font-size:16px;
	}



/* Navigation */

.nav {
	z-index: 100;
	position: relative;
}
.nav li {
	float: left;
	position: relative;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
	background: #ccc;
	color: #333;
	display: block;
	padding: 0 9px;
}

.nav li a:hover {
	background: #ccc;
	color: #000;

}
#nav-one li:hover a, 
#nav-one li.sfHover a {
	background: #ccc;
	color: #000;
}
#nav-one li:hover ul a, 
#nav-one li.sfHover ul a {
	background: yellow;
	color: black;
}
#nav-one li:hover ul a:hover, 
#nav-one li.sfHover ul a:hover {
	background: #ccc;
	color: #000;
}

.nav ul {
	background: #565656;
	margin: 0;
	width: 100px;
	position: absolute;
	top: -999em;
	/*left: -1px;*/
}
.nav li:hover ul,
.nav li.sfHover ul {
	top: 24px;
}
.nav ul li {
	border: 0;
	float: none;
}
.nav ul a {
	padding-right: 20px;
	/*width: 80px;*/
	white-space: nowrap;
}
.nav ul a:hover {
	background: #ccc;
	color: #000;
}
.nav > li {
	width:25%;
}

/*@media screen and (-webkit-min-device-pixel-ratio:0) {*//* 针对webkit*/
	.content{
		width:100%;
	}

	.nav > li {
		float:none;width:100%;
		position:static;display:inline;
	}

	.nav > li > ul {
		position:static;display:block;
		width:100%;float:none;padding:0;margin:0;top:0;
	}
	.nav > li > a {
		float:none;width:100%;padding:0;margin:0;
	}
	.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
		padding:0 0;
	}
	.nav li:hover ul,
	.nav li.sfHover ul {
		top: 0;
	}
	#nav-one li ul a{
		background-color:yellow;
	}
/*}*/
/* 正常PC液晶屏样式 */
 
/* iPad 及以下，以及所有小于（不等于）960宽度的平板电脑 */
@media only screen and (max-width: 959px) {
}
 
/* 仅iPad 竖版，以及所有小于（不等于）标准960宽度的平板电脑的竖版 */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
 
/* iPhone 及以下 */
@media only screen and (max-width: 767px) {}
 
/* 仅iPhone 横版，包括某些平板电脑的竖版 */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
 
/* 仅iphone4 竖版 */
@media only screen and (max-width: 479px) {}

</style>

<div id="content" class="content">

<ul id="nav-one" class="nav">
	<li class="clearfix">

		<a class="item" href="#item1">item 1</a>
		<ul class="sub-menu">
			<li><a href="#item1.1">item 1.1</a></li>
			<li><a href="#item1.2">item 1.2</a></li>
			<li><a href="#item1.3">item 1.3</a></li>
			<li><a href="#item1.4">item 1.4</a></li>

		</ul>
	</li>
	<li class="clearfix">
		<a  class="item" href="#item2">item 2</a>
		<ul class="sub-menu">
			<li><a href="#item2.1">item 2.1</a></li>
			<li><a href="#item2.2">item 2.2</a></li>

		</ul>
	</li>
	<li class="clearfix">
		<a href="#item3" class="item">item 3</a>
		<ul class="sub-menu">
			<li><a href="#item3.1">item 3.1</a></li>
			<li><a href="#item3.2">item 3.2</a></li>

		</ul>
	</li>
	<li class="clearfix">
		<a href="#item4" class="item">item 4</a>
		<ul class="sub-menu">
			<li><a href="#item4.1">item 4.1</a></li>
			<li><a href="#item4.2">item 4.2</a></li>
			<li><a href="#item4.3">item 4.3</a></li>
		</ul>
	</li>
</ul>

<div style="background-color:green;">边界</div>

</div>


<script>
YUI({
	combine:true,
	comboBase:'http://a.tbcdn.cn/??',
	base:'http://a.tbcdn.cn/s/yui/3.3.0/build/',
	root:'s/yui/3.3.0/build/',
	filter:{
		'searchExp': '&', 
		'replaceStr': ','
	},
	modules:{
		'slide':{
			fullpath:'http://jayli.github.com/gallery/yuislide/slide.js',
			requires:['node','anim']
		}
	}
}).use('slide',function(Y){

	var uls = Y.all('.nav  .sub-menu');
	
	uls.setStyles({
		height:'0px',
		overflow:'hidden'
	});
	Y.all('.nav .item').on('click'/*touchstart*/,function(e){
		Y.log(22);
		var node = e.target.get('nextSibling');
		if(!node)return;
		new Y.Anim({
			node:node,
			to:{

			}
		})
		
	});

});
</script>
</body>
</html>
